<template>
	<view class="">
		<u-popup :show='show' mode='bottom' :closeOnClickOverlay='true' @close='beforeClose' :round='12'
			:safeAreaInsetBottom='false' bgColor='transparent'>
			<view class="plr-16 pt-16 batch br-t-12">
				<view class="text-center  font-w-600 font-size-16 color flex flex-ai-center flex-js-center">
					<text class="flex-1 ml-12">委托购买</text>
					<w-icon name="close" size="24" @click="beforeClose"></w-icon>
				</view>
				<view class="mtb-12  font-size-16 font-w-600 color">请输入藏品单价</view>
				<view class="flex flex-js-sb flex-ai-center mtb-8 ptb-14 plr-12 br-12 price-limit item">
					<view class="flex-1 flex font-color-textPrimary color">
						藏品单价
						<input v-model="form.price" :auto-focus="autoFocus" class='price-limit-inp'
							style="color: #B91223;margin-left: auto;" type="number" name="" id="" />
						元
					</view>
				</view>
				<view class="flex flex-ai-center">
					<view class="color font-size-12">当前藏品可委托最高限价</view>
					<view class="font-color-theme font-size-14 font-w-bold mr-4">￥{{entrustPriceObj.reprice_limit}}</view>
					<view class="color font-size-12">最低限价</view>
					<view class="font-color-theme font-size-14 font-w-bold">￥{{entrustPriceObj.reprice_min_limit}}</view>
				</view>
				<view class="flex flex-js-sb flex-ai-center mtb-12 num-limit mt-24">
					<view class="color font-size-16 font-w-600">委托数量</view>
					<view class="flex flex-ai-center">
						<w-icon :name="form.num<=1? 'minus-disable':'minus-active'" size="18" @click='minus'>
						</w-icon>
						<input v-model="form.num" type="number" @input="changenum" class="plr-4 font-color-textPrimary"
							style="width: 100rpx;text-align: center;" />
						<w-icon :name="'add-active'" size="18" @click='add'></w-icon>
					</view>
				</view>
				<view class="flex flex-js-sb flex-ai-center mt-24">
					<view class="color font-size-16 font-w-600">委托总价</view>
					<view class="font-color-theme font-size-12"><text
							class="font-size-16 font-w-bold mr-2">{{contractsTotalPrice}}</text> 元
					</view>
				</view>
				<!-- <view class="flex flex-ai-center flex-js-center mt-32">
					 <u-checkbox-group
						v-model="checkboxValue1"
						placement="column"
						shape="circle"
						activeColor="#FF2D23"
					>
						<u-checkbox
							:customStyle="{}"
							v-for="(item, index) in checkboxList1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
					<view class="font-color-theme">《使用条款》</view>
				</view> -->
				<u-gap height="30"></u-gap>
				<w-button :disabled="disabled" class="mt-8" shape="circle" @click='checkVerifyStatus'>立即委托</w-button>
			</view>
		</u-popup>
		<u-popup :show='payShow' mode='bottom' :closeOnClickOverlay='true' :round='12' :safeAreaInsetBottom='false'
			bgColor='transparent' @close='confirmClose'>
			<view class="plr-16 pt-16 batch br-t-12">
				<view class="text-center  font-w-600 font-size-16 color flex flex-ai-center flex-js-center">
					<text class="flex-1 ml-12">委托购买</text>
					<w-icon name="close" size="24" @click="confirmClose"></w-icon>
				</view>

				<view class="font-size-16 color font-w-500 text-center mt-20">￥ <text
						class="font-size-24 font-w-bold">{{contractsTotalPrice}}</text> </view>
				<view class="mt-20">
					<view class="font-size-16 color font-w-500">支付方式</view>
					<view class="flex flex-js-sb mlr-8 ptb-12" v-for="item in basePayList" :key="item.icon"
						style="border-bottom:1px solid rgba(255, 255, 255, 0.2);">
						<view class="flex flex-ai-center">
							<w-icon size="18" :name="item.icon"></w-icon>
							<text class='ml-8'
								:class="item.able&&item.check?'font-color-textPrimary':'font-color-999'">{{handleLang(`${item.name}钱包`)}}</text>
						</view>
						<w-icon v-if="item.able&&item.check" name="checked-icon" size="20"></w-icon>
						<!-- <w-icon v-else name="uncheck-icon" size="20"></w-icon> -->
						<w-button v-if="!item.able" type="colorful" size="mm" shape="circle"
							:disabled="!userInfo.real_name_authentication"
							@click='toOpen(item)'>{{handleLang('去开通')}}</w-button>
					</view>
				</view>
				<!-- <view class="flex flex-ai-center flex-js-center mt-32">
					 <u-checkbox-group
						v-model="checkboxValue1"
						placement="column"
						shape="circle"
						activeColor="#FF2D23"
					>
						<u-checkbox
							:customStyle="{}"
							v-for="(item, index) in checkboxList1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
					<view class="font-color-theme">《使用条款》</view>
				</view> -->
				<u-gap height="30"></u-gap>
				<w-button class="mt-8" shape="circle" @click='submit'>立即购买</w-button>
			</view>
		</u-popup>
		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	import {
		bacthCreateOrder
	} from '@/api/order/index.js'

	import {
		basePayList
	} from '@/config/index.js'

	import {
		createEntrust
	} from '@/api/market/index.js'

	import PayUtil from '@/utils/payUtil.js'
	export default {
		props: {
			show: {
				default: false,
				type: Boolean
			},
			product: {
				type: Object,
				default () {
					return {

					}
				}
			},
			entrustPriceObj: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		model: {
			prop: "show",
			event: 'change'
		},
		data() {
			return {
				form: {
					price: '',
					num: 1
				},
				timer: null,
				autoFocus: false,
				immediate: true,
				payShow: false,
				basePayList,
				maxMum: 20, //最大委托数量
				checkboxList1:[
					{
						name:'我已同意 lvBox'
					}
				],
				checkboxValue1:['1']
			}
		},
		computed: {
			disabled() {
				let able = this.form.price && this.form.num && this.checkboxValue1.length
				return !able
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.batchBuy_check)
				}
			}),
			contractsTotalPrice() {
				return this.form.price * this.form.num
			}
		},
		watch: {
			show(value) {
				if (value) this.autoFocus = true
				else this.autoFocus = false
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			checkVerifyStatus() {
				if (this.form.price < 1) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的金额'
					})
					return
				}
				if (this.captchaStatus) {

					this.$refs.captcha.showCaptcha();
					this.$emit('change', false)
				} else {
					// this.submit();
					this.payShow = true
					this.$emit('change', false)
				}
			},
			beforeClose() {
				this.$emit('change', false)
			},
			confirmClose() {
				this.payShow = false
				this.$emit('change', true)
			},
			// open() {
			// 	this.form.price = this.product.max_price
			// 	this.form.num = this.product.batch_pay_num
			// },
			submit() {
				let {
					key,
					id
				} = this.product;

				createEntrust({
					collection_id: id,
					pay_way: this.basePayList.find(v => v.check).pay_way,
					max_price: this.form.price,
					number: this.form.num
				}).then(res => {
					new PayUtil({
						pay_type: 4,
						order_number: res.data.order_sn,
						order_type: 12,
						pay_way: this.basePayList.find(v => v.check).pay_way,
						order_id: res.data.order_id
					})
				})
			},
			changenum({
				detail
			}) {
				if (this.timer) clearTimeout(this.timer);
				let {
					value
				} = detail;
				if (!value) value = 1;
				value = parseInt(value);
				if (value < 1) value = 1
				console.log(value, this.product.batch_pay_num, '输入的值');
				// if (value > this.product.batch_pay_num) value = this.product.batch_pay_num
				if (value > this.maxMum) value = this.maxMum
				this.timer = setTimeout(() => {
					this.form.num = value
				}, 800)

			},
			minus() {
				if (this.form.num <= 1) return;
				this.form.num = parseInt(this.form.num)
				this.form.num--
			},
			add() {
				// if (this.form.num == this.product.batch_pay_num) return;
				if (this.form.num >= this.maxMum) return;
				this.form.num = parseInt(this.form.num)
				this.form.num++
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #000000;
	}

	.batch {
		background: $item-bg-color;
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom));

		.item {
			width: 100%;
			border: 3rpx solid #eee;

			.lable {
				@extend .font-color-999, .font-w-500;
			}
		}

		.price-limit {
			&-inp {
				width: 100rpx;
				@extend .text-center, .mlr-2, .font-w-500, .font-color-main-text;
			}
		}
	}
</style>